<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.selection.RowModel（行选择模式）示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		//创建表格数据
		var datas = [
			[100,'张三',24], [200,'李四',30], [300,'王五',29]
		];
		//创建Grid表格组件
		var grid = Ext.create('Ext.grid.Panel',{
			title : '行选择模式示例',
			renderTo: Ext.getBody(),
			width:200,
			height:170,
			frame:true,
			simpleSelect : true,//启用简单选择功能 
			multiSelect : true,//支持多选
			selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
			tbar : [{
				text : '取得所选行',
				handler : function(){
					var msg = '';
					var rows = grid.getSelectionModel().getSelection();
					for(var i = 0; i < rows.length; i++){
						msg = msg + rows[i].get('name') + '\n';
					}
					alert(msg);
				}
			}],
			store: {//配置数据源
		        fields: ['id','name','age'],//定义字段
		        proxy: {
		            type: 'memory',//Ext.data.proxy.Memory内存代理
		            data : datas,//读取内嵌数据
		            reader : 'array'//Ext.data.reader.Array解析器
		        },
		        autoLoad: true//自动加载
		    },
			columns: [//配置表格列
				{header: "id", width: 30, dataIndex: 'id', sortable: true},
				{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
				{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
			]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>